// # 音乐全局变量
let musicI = 0
let videoObj = document.querySelector('video')

// # 点击音乐列表播放
// 1 获取音乐列表
let musicObjs = document.querySelectorAll('.music .list .content .row')
// 2 遍历
musicObjs.forEach((item, i) => {
    // 3 绑定点击事件
    // 4 事件处理函数中
    item.onclick = function() { 
        // 5将当前索引保存全局的便于后面切换上下歌曲
        musicI = i
        // 6左-播放动画效果
        musicObjs.forEach((row, rowIndex) => {
            musicObjs[rowIndex].style.color = ''
            row.querySelector('span').innerText = rowIndex+1
        })
        musicObjs[i].style.color = 'pink'
        musicObjs[i].querySelector('span').innerHTML = `
            <i class="playing line1"></i>
            <i class="playing line2"></i>
            <i class="playing line3"></i>
        `
        // 7右-切换图片
        let name = this.getAttribute('name')
        // 8播放音乐播放图标
        videoObj.src = `/mp3/${name}.mp3`
        document.querySelector('.music .cover img').src = `/mp3/imgs/${name}.jpeg`
        videoObj.play()

        document.querySelector('.player .info img').src = `/mp3/imgs/${name}.jpeg`
        document.querySelector('.player .info span').innerHTML = item.querySelector('span:nth-of-type(3)').innerHTML

        document.querySelector('.player .play-box .play .play-pause-box i:nth-of-type(1)').style.display = 'none'
        document.querySelector('.player .play-box .play .play-pause-box i:nth-of-type(2)').style.display = 'block'
        



// # 同步歌词滚动
    document.querySelector('.music .cover ul').innerHTML = ''
    // 然后：再追加
    lrcFilter.forEach((item,i) => {
        let liObj = document.createElement('li')
        if (i===0) liObj.className = 'active'
        liObj.innerText = item.content
        document.querySelector('.music .cover ul').appendChild(liObj)
    })


    // 同步歌词
    videoObj.ontimeupdate = function() {
        // 一、找到播放进度索引
        let findIndex = 0
        for (let i=lrcFilter.length-1; i>=0; i--)
        {
            if ((videoObj.currentTime+.5) >= lrcFilter[i].time)
            {
                findIndex = i 
                break
            }
        }
        // 二、高亮歌词 & 滚动到高亮位置
        if (lrcFilter[findIndex].content)
        {
            // 高亮歌词
            document.querySelector('.music .cover ul li.active').className = ''
            document.querySelector(`.music .cover ul li:nth-of-type(${findIndex+1})`).className = 'active'
            // 滚动到高亮位置
            document.querySelector(`.music .cover ul`).style.marginTop = -(findIndex)*40 + 'px'
        }

        // 同步播放进度
        let m = Math.floor(videoObj.currentTime/60)
        let s = parseInt(videoObj.currentTime - m*60)
        document.querySelector('.player .current').innerText = `${String(m).padStart(2,0)}:${String(s).padStart(2,0)}`

        if (videoObj.duration)
        {
            let m = Math.floor(videoObj.duration/60)
            let s = Math.floor(videoObj.duration - m*60)
            let totalPlay = String(m).padStart(2, 0) + ':' + String(s).padStart(2, 0)
            document.querySelector('.player .duration').innerText = totalPlay 

            // 同步进度条
            let w = window.innerWidth || document.documentElement.clientWidth
            document.querySelector('.player .play-bar .progress').style.width =  w / (videoObj.duration / videoObj.currentTime) + 'px'
            document.querySelector('.player .play-bar .bar').style.left =  w / (videoObj.duration / videoObj.currentTime) + 'px'
        }
    }
}


// # 播放按钮
let player = document.querySelector('.player')

player.querySelector('.play-pause-box').onclick = function() {
    console.log(videoObj.paused)

    if (videoObj.paused)
    {

        document.querySelector('.player .play-box .play .play-pause-box i:nth-of-type(1)').style.display = 'none'
        document.querySelector('.player .play-box .play .play-pause-box i:nth-of-type(2)').style.display = 'block'
        
        videoObj.play()
    } else  {
        document.querySelector('.player .play-box .play .play-pause-box i:nth-of-type(1)').style.display = 'block'
        document.querySelector('.player .play-box .play .play-pause-box i:nth-of-type(2)').style.display = 'none'
        
        videoObj.pause()
    }
}

// # 进度条拖拽
// 一、给拖拽按钮绑定点击事件
let barBtnObj = document.querySelector('.player .bar')
// 二、事件处理函数中
barBtnObj.onmousedown = function() {
    // 2.1 给网页绑定鼠标移动事件 -> a-同步拖拽按钮，b-同步播放进度条，c-同步播放
    document.onmousemove = (evt) => {
        let e = evt || window.event
        let l = e.pageX  - this.offsetWidth/2
        if (l<0) l = 0
        let maxL = window.innerWidth || document.documentElement.clientWidth
        if (l>maxL) l=maxL
        this.style.left = l + 'px'
        document.querySelector('.player .progress').style.width = l+'px'    
  videoObj.currentTime = videoObj.duration / (maxL/l)
    }

    // 2.2 给网页绑定鼠标松开事件
    document.onmouseup = function() {
        document.onmousemove = null
    }
}

// # 音频拖拽进度条
let barvolumeObj = document.querySelector('.player .volume .bar')
barvolumeObj.onmousedown = function() 
{
    document.onmousemove = (evt) => {
        let e = evt || window.event
        
        let w = window.innerWidth || document.documentElement.clientWidth
        let volume = document.querySelector('.player .volume')
        
        let l = e.pageX - volume.offsetLeft - this.offsetWidth/2
        if (l<0) l =0
        let maxL =  volume.offsetWidth 
        if (l>maxL) l =maxL
        this.style.left = l + 'px'
        console.log(maxL, l);
        document.querySelector('.player .volume .progress').style.width =  l + 'px'

        videoObj.volume = l/100
    }
    document.onmouseup = function() {
        document.onmousemove = null
    }
}